<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>demo</title>
	<style type="text/css">
		*{
			margin: 0px;
			padding: 0px;
			text-decoration: 0px;
			list-style: none;
		}
		.banner{
			width: 1226px;
			height: 460px;
			margin: 0 auto;
			margin-top: 50px;
			overflow: hidden;
			position: relative;
		}
		.banner .list .im{
			position: absolute;
			top:0px;
			left: 0px;
		}
		.banner .list .im{
			width: 1226px;
			height: 460px;
		}

	</style>
	<script type="text/javascript">
		window.onload=function(){
			tp=document.getElementsByClassName("im");
			lb=document.getElementsByClassName("list");
			len=tp.length;
			//alert(len);

			num=0;
			//pos = ++pos == len ? 0 : pos;

			function bd(){

				for(n=0;n<len;n++){
					tp[n].style.display="none";
				}
				tp[num].style.display="block";
				//num++;
				
				
				// tp[num].style.display="block";
				console.log(num)
				if(num==3){
				// 	// console.log('4'+num);
					num=0;
				}else{
				// 	// console.log('3'+num);
					num++;
				}
			

			}
			timer=setInterval(bd, 1000);
			lb[0].onmousemove=function(){
				clearTimeout(timer);
			}
			lb[0].onmouseout=function(){
				timer=setInterval(bd, 1000);
			}

		}
	</script>
</head>
<body>
	<div class="banner">
		<div class="list">
			<li class="im"><img src="./1.jpg" class="mm" alt=""></li>
			<li class="im"><img src="./2.jpg" class="mm" alt=""></li>
			<li class="im"><img src="./3.jpg" class="mm" alt=""></li>
			<li class="im"><img src="./4.jpg" class="mm" alt=""></li>
		</div>
	</div>
	
</body>
</html>